<template>
  <div>
    <uni-row>
      <view class="navbar">
        <view class="nav-item" :class="{current:currentIndex === 0}" @click="handleChange(0)">
          全部
        </view>
        <view class="nav-item" :class="{current:currentIndex === 1}" @click="handleChange(1)">
          待同步
        </view>
      </view>
    </uni-row>
    <uni-fab
        :content="content"
        horizontal="right"
        @trigger="handleClick"
    />
    <view class="swiper-box">
      <scroll-view class="backg">
        <uni-col class="info-box" :xs="24" :sm="11" v-for="item in enters" :key="item.id" @click="handleUpdate(item)">
          <uni-row style="padding-left: 20px">
            <uni-col :span="16">
              <uni-title :title="item.enter.batchNumber" type="h1"/>
            </uni-col>
            <uni-col :span="8" class="status">
              <uni-tag v-if="item.change != null"
                       text="待同步"
                       circle
                       inverted
                       style="margin-right: 15px"></uni-tag>
            </uni-col>
          </uni-row>
          <uni-row style="padding-left: 20px">
            <uni-col :span="21">
              <uni-row>
                <uni-col :span="12" class="text">
                  类&nbsp;&nbsp;&nbsp;&nbsp;型 : {{ item.enter.bugType }}
                </uni-col>
                <uni-col :span="12" class="text">
                  养&nbsp;&nbsp;虫&nbsp;&nbsp;车&nbsp;&nbsp;间 : {{item.enter.roomName}}
                </uni-col>
                <uni-col :span="12" class="text">
                  幼 虫 数 量 : {{item.enter.sum}}
                </uni-col>
                <uni-col :span="12" class="text">
                  操 作 人 员 : {{item.enter.userName}}
                </uni-col>
                <uni-col :span="18" class="text">
                  下次换料时间 : {{item.enter.nextReloadingDate}}
                </uni-col>
              </uni-row>
            </uni-col>
            <uni-col :span="3">
<!--              <image @click="handleDelete(item)" v-if="item.change != null" src="../../static/trash.png" style="width: 50px;height: 50px;margin-top: 5px"></image>-->
            </uni-col>
          </uni-row>
        </uni-col>
      </scroll-view>
    </view>

  </div>
</template>

<script setup lang="ts">

import {inputService} from "../../pagesVM/input";
import {computed, onMounted, reactive, ref, watch} from "vue";
import {loginService} from "../../pagesVM/login";
import {BugEnterVo} from "../../sql/domin";
import {InputMapper} from "../../mappers/InputMapper";
import {ChangeType} from "../../util/Constants";
import {LocalChangeMapper} from "../../mappers/LocalChangeMapper";
import UniCol from "../../uni_modules/uni-row/components/uni-col/uni-col.vue";


const {refrashEnter, getList, enterings,syncEnter,handleDelete,handleUpdate} = inputService()

const {getNetWorkType} =  loginService()

onMounted(async ()=>{
  enterings.value = await getList()
})

const content = reactive([
  // {
  //   iconPath: '/static/refrash.png',
  //   selectedIconPath: '/static/refrash-active.png',
  //   text: '刷新',
  //   active: false
  // },
  // {
  //   iconPath: '/static/upload.png',
  //   selectedIconPath: '/static/upload-active.png',
  //   text: '同步',
  //   active: false
  // },

  {
    iconPath: '/static/add.png',
    selectedIconPath: '/static/add-active.png',
    text: '新增',
    active: false
  }
])

const selectIndex = ref()

const currentIndex = ref(0)

const enters = computed(() => {
  return enterings.value?.filter(it =>{
    if (currentIndex.value == 0)
      return true
    if (currentIndex.value == 1)
      if (it.change != null) {
        return true
      }
  })
})

watch(selectIndex, (newVal, oldVal) => {
  content[newVal].active = true
  content[oldVal].active = false
})

const handleClick = async (e: any) => {
  selectIndex.value = e.index
  switch (e.index){
    // case 0:
    //   uni.showToast({
    //     icon:'none',
    //     title:'正在检查网络'
    //   })
    //   if (await getNetWorkType()){
    //     uni.showLoading({
    //       title:'网络连接成功,正在拉取数据'
    //     })
    //     refrashEnter().then(()=>{
    //       getList()
    //     })
    //     uni.hideLoading()
    //   }
    //   break
    // case 1:
    //   await syncEnter()
    //   break
    case 0:
      uni.navigateTo({
        url:'/pages/input/form'
      })
  }
}

const handleChange = (index: number) => {
  currentIndex.value = index
}



</script>

<style lang="scss">

.navbar {
  position: fixed;
  left: 0;
  top: var(--window-top);
  display: flex;
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  z-index: 1000;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 15px;
    color: #3a3a3a;
    position: relative;

    &.current {
      color: #4cd964;

      &:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 120px;
        height: 0;
        border-bottom: 4px solid #4cd964;
      }
    }
  }
}

.swiper-box {
  margin-top: 60px;
  height: 100%;
}

.info-box {
  margin: 10px;
  border-radius: 5px;
  padding: 20px;
  background-color: white;
}

.status {
  text-align: right;
  line-height: 40px;
}

.backg {
  background-color: rgba(240, 240, 240, 0.76);
  height: 100%;
}

.text {
  color: #7f7f7f;
  font-size: 20px;
}

</style>
